
body[data-type^='newtab'] {

  > section#wrapper > main {

    p.buttons {

      &.hidden {
        display: none;
      }

      > a.button {
        background: $mainColor2;
        padding: 10px 15px 10px 38px;
        margin: 20px 0 0 0;

        + a.button {
          margin-left: 10px;
        }

        &[data-name='preview'] {
          @include mask('icon-search', $textColorInverted, 22px);

          &::before {
            left: 2px;
            width: 36px;
          }
        }

        &[data-name='styling'] {
          @include mask('settings/icon-theme', $textColorInverted, 18px);

          &::before {
            left: 5px;
            width: 36px;
          }
        }
      }
    }

    div.faviconOptions {
      display: grid;
      grid-template-columns: auto 1fr;

      @media (max-width: 1280px) {
        grid-template-columns: 1fr;
      }

      &.hidden {
        display: none;
      }

      > h2 {
        grid-column: 1/-1;
      }

      > div {

        > div.iconShapeWrapper {

          > ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px 20px;
          }

          ~ div {
            margin-top: 12px;
          }
        }
      }

      > aside {
        position: relative;
        justify-self: right;
        width: 100%;
        max-width: 600px;
        height: 80px;
        background-image: img('settings/mockup-left.png'), img('settings/mockup-right.png'), img('settings/mockup-middle.png');
        background-repeat: no-repeat, no-repeat, repeat-x;
        background-position: left 0, right 0, left 0;
        background-size: auto 80px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

        @media (max-width: 1280px) {
          justify-self: left;
          grid-row: 2;
          margin-bottom: 20px;
        }

        > canvas {
          position: absolute;
          top: 12px;
          left: 95px;
          width: 20px;
          height: 20px;
        }

        > span {
          position: absolute;
          top: 13px;
          left: 126px;
        }
      }
    }
  }
}

@import "../../rtl/include/settings/newtab";